<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<link rel="stylesheet" href="../css/content.css" />	
<script src="../js/jquery-1.8.3.min.js"></script>

<script src="../js/tongjibaobiao/duozhibiaoqushi/highcharts.js"></script>
<script src="../js/tongjibaobiao/duozhibiaoqushi/exporting.js"></script>
<script src="../js/tongjibaobiao/duozhibiaoqushi/data.js"></script>

<script src="../laydate/laydate.js"></script>
<title></title>
<style>
.baobiao1{    background: #051515;display: block; overflow: hidden;}
.baobiao1 .module{width: 49.9%;height:400px;  background: #05313c; border-bottom:2px solid #051515;}
.baobiao1 .module table{display: none;}
.module h5{ margin:0 auto; text-align:center;     color: #fff;
    font-size: 18px; font-weight:normal; margin-top:10px;}
.wave{width:200px;height:200px;overflow:hidden;border-radius:50%;background:rgba(255,203,103,.6);margin:100px auto;position:relative;text-align:center;display:table-cell;vertical-align:middle;    left: 205px;
    top: 50px;}
	.wave span{display:inline-block;color:#fff;font-size:30px;position:relative;z-index:2;}
	.wave canvas{position:absolute;left:0;top:0;z-index:1;}
</style>
</head>

<body>

<div class="fanhui">
    <p><a href="#">车辆监控&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">行为分析&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">驾驶习惯评估&nbsp;</a></p>
</div>


<div class="demo3">
    <ul class="chaxunda">
    <li><p>开始时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="start"></li>
    <li><p>结束时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="end"></li>
    <li><p>车辆选择：</p><select><option>车辆选择</option><option>车辆选择</option></select>
    </li>
    <li><input type="button" value="查询" style=" background:#22abd4; color:#ffffff; text-align:center; padding:0;" class="showdiv"></li>  
    </ul>
</div>
<script>
!function(){
laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
laydate({elem: '#demo'});//绑定元素
}();
//日期范围限制
var start = {
    elem: '#start',
    format: 'YYYY-MM-DD',
    min: laydate.now(), //设定最小日期为当前日期
    max: '2099-06-16', //最大日期
    istime: true,
    istoday: false,
    choose: function(datas){
         end.min = datas; //开始日选好后，重置结束日的最小日期
         end.start = datas //将结束日的初始值设定为开始日
    }
};
var end = {
    elem: '#end',
    format: 'YYYY-MM-DD',
    min: laydate.now(),
    max: '2099-06-16',
    istime: true,
    istoday: false,
    choose: function(datas){
        start.max = datas; //结束日选好后，充值开始日的最大日期
    }
};
laydate(start);
laydate(end);
//自定义日期格式
laydate({
    elem: '#test1',
    format: 'YYYY年MM月DD日',
    festival: true, //显示节日
    choose: function(datas){ //选择日期完毕的回调
        alert('得到：'+datas);
    }
});
//日期范围限定在昨天到明天
laydate({
    elem: '#hello3',
    min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
    max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
});
</script>
<div class="baobiao1">
	<div class="module fl">
    	<h5>健康度</h5>
 		<div id="wave" class="wave"><span>60%</span></div>
	<script>
	var wave = (function () {
	    var ctx;
	    var waveImage;
	    var canvasWidth;
	    var canvasHeight;
	    var needAnimate = false;

	    function init (callback) {
	        var wave = document.getElementById('wave');
	        var canvas = document.createElement('canvas');
	        if (!canvas.getContext) return;
	        ctx = canvas.getContext('2d');
	        canvasWidth = wave.offsetWidth;
	        canvasHeight = wave.offsetHeight;
	        canvas.setAttribute('width', canvasWidth);
	        canvas.setAttribute('height', canvasHeight);
	        wave.appendChild(canvas);
	        waveImage = new Image();
	        waveImage.onload = function () {
	            waveImage.onload = null;
	            callback();
	        }
	        waveImage.src = '../images/wave.png';
	    }

	    function animate () {
	        var waveX = 0;
	        var waveY = 0;
	        var waveX_min = -203;
	        var waveY_max = canvasHeight * 0.7;
	        var requestAnimationFrame = 
	            window.requestAnimationFrame || 
	            window.mozRequestAnimationFrame || 
	            window.webkitRequestAnimationFrame || 
	            window.msRequestAnimationFrame ||
	            function (callback) { window.setTimeout(callback, 1000 / 60); };
	        function loop () {
	            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
	            if (!needAnimate) return;
	            if (waveY < waveY_max) waveY += 1.5;
	            if (waveX < waveX_min) waveX = 0; else waveX -= 3;
	            
	            ctx.globalCompositeOperation = 'source-over';
	            ctx.beginPath();
	            ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true);
	            ctx.closePath();
	            ctx.fill();

	            ctx.globalCompositeOperation = 'source-in';
	            ctx.drawImage(waveImage, waveX, canvasHeight - waveY);
	            
	            requestAnimationFrame(loop);
	        }
	        loop();
	    }

	    function start () {
	        if (!ctx) return init(start);
	        needAnimate = true;
	        setTimeout(function () {
	            if (needAnimate) animate();
	        }, 500);
	    }
	    function stop () {
	        needAnimate = false;
	    }
	    return {start: start, stop: stop};
	}());
	wave.start();
	</script>
	</div>
<div class="module fr">
	<div id="jiashixiguanpinggu" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="tongjibiao" style="display:none">
    <thead>
        <tr>
            <th></th>
            <th>Jane</th>
            <th>John</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <th>Pears</th>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <th>Plums</th>
            <td>5</td>
            <td>11</td>
        </tr>
        <tr>
            <th>Bananas</th>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <th>Oranges</th>
            <td>2</td>
            <td>4</td>
        </tr>
    </tbody>
</table>
<script>
$(function () {
    $('#jiashixiguanpinggu').highcharts({
        data: {
            table: 'tongjibiao'
        },
        chart: {
            type: 'column'
        },
        title: {
            text: '不良驾驶记录'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        }
    });
});
</script>
</div>

</div>


</body>
</html>
